<html>
    <head>
        <meta charset="UTF-8" />

    </head>

    <body>
    <div id="div1" style="margin-top: 100px;"></div>
    <div id="div2" style="width: 500px; height: 500px; display: none;"></div>
    <button onclick="preview()">预览</button>
    <!-- 引入 wangEditor.min.js -->
    <script type="text/javascript" src="wangEditor.js"></script>
    <script type="text/javascript" src="editor_priview.js"></script>
    <script type="text/javascript" src="jquery3.6.0.js"></script>
    <script type="text/javascript" src="xss.js"></script>
    <script type="text/javascript">
        const E = window.wangEditor;
        const editor = new E('#div1');
        // 或者 const editor = new E( document.getElementById('div1') )
        // 配置上传图片接口地址
        //editor.config.uploadImgServer = '/upload-img'.
        editor.config.uploadImgShowBase64 = true;
        // 上传图片
        editor.config.customUploadImg = function (resultFiles, insertImgFn) {
            // resultFiles 是 input 中选中的文件列表
            // insertImgFn 是获取图片 url 后，插入到编辑器的方法
            console.log("自定义上传......");
            var data = new FormData();
            for (let i = 0; i < resultFiles.length; i++) {
                data.append("files", resultFiles[i]);
            }
            $.ajax({
                type: "post",
                url: "http://localhost:8083/api/upload/img",
                data: data,
                //默认文件类型application/x-www-form-urlencoded  设置之后multipart/form-data
                contentType: false,
                // 默认情况下会对发送的数据转化为对象 不需要转化的信息
                processData: false,
                success: function (res) {
                    console.log(res);
                    // 上传图片，返回结果，将图片插入到编辑器中
                    let json = JSON.parse(res);
                    console.log(json);
                    let data = json.data;
                    for (let i = 0; i < data.length; i++) {
                        insertImgFn(data[i]["url"]);
                    }

                },
            });
        }
        // 上传视频
        editor.config.customUploadVideo = function (resultFiles, insertVideoFn) {
            insertVideoFn(videoUrl);
        }
        // placeholder
        editor.config.placeholder = '请输入文章内容';
        //
        editor.menus.extend("preview", AlertMenu);
        editor.config.menus = editor.config.menus.concat("preview")
        editor.create();

        /** 预览 */
        function preview() {
            let html = editor.txt.html();
            const safeHtml = filterXSS(html);
            console.log('处理过 xss 攻击的 html', safeHtml)
            $("#div2").html(html);
            document.getElementById("div2").style.display="block";
        }


    </script>

    </body>
</html>